<!DOCTYPE html>
<html>
<head>
<title>会员登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/static/css/my.css">
    <script src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script> 
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="/static/layer/layer/layer.js"></script>
    <script src="/static/js/common.js"></script>

<style type="text/css">
    html{height: 100%;font-size: 14px;}
    #top{background: initial;border-bottom:1px solid skyblue;}
    #top div{color: white;}
    label{color: #000;}
</style>
</head>
<body style="background:linear-gradient(to bottom right,#f60, #fff);max-width: 800px;margin:0 auto;">
    <div class="container p-5 my-2 " style="margin:0 auto; max-width: 800px;" >
   
    <div id="top" class="text-center row text-primary">
      <div class="col-2"></div>
      <div class="col-8">{$sys_name}</div>
        <div class="col-2"></div> 
    </div>

    <form method="post" action="">
        <div class="text-center" style="margin:25px 0;font-weight: bold;">会员登录(Login for member)</div>
      <div class="mb-3 mt-3">
        <label for="nameOrMobile" class="form-label">用户名/手机号(Name or mobile):</label>
        <input type="text" class="form-control" id="nameOrMobile" placeholder="Enter name or mobile" name="nameOrMobile">
      </div>
      <div class="mb-3">
        <label for="pwd" class="form-label">密码(Password):</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
      <div class="mb-3" style="position: relative;">
        <label class="form-check-label">验证码(Verify Code):</label>
        <div class="input-group">
            <input class="form-control" type="text" id="verify" name="verify" /> 
            <img src="/index.php/login/verify" id="validate" onclick="verifyReload();" style="margin:1px 0;border-radius: 4px;" />
        </div>
      </div>
        <div class="text-center d-grid">
            <button  type="button" class="btn btn-info btn-block" onclick="return dologin()">登录(Login)</button>
            <div style="height: 10px;"></div>
            <a href="/index.php/customer/register" class="d-grid">
            <button  type="button" class="btn btn-warning btn-block">注册(Register)</button>
            </a>
        </div>
    </form>

    <div class="app_download" style="margin-top:30px;text-align: center;">
        <img src="/upload/biglala.png" style="border:0 solid #f00;width: 100px;height: 100px;" >
        <div>App download</div>
    </div>

    </div>

<script type="text/javascript">
    $(document).ready(function(){
        verifyReload();
    })


    function dologin(){
        var nameOrMobile = $("#nameOrMobile").val();
        var pwd = $("#pwd").val();
        var verify=$("#verify").val();
        console.log(nameOrMobile+","+pwd+","+verify)

        if(!nameOrMobile || !pwd || !verify) {
            layer.msg('请输入完整的登录信息！');
            return ;
        }
        var data={nameOrMobile:nameOrMobile,pwd:transX.encode(pwd),verify:verify};
        $.post('/index.php/login/customer_login',data,function(res){
            if(res.code && res.url){
                layer.msg("Let's go!!!");
                location.href=res.url;
            }else{
                layer.msg(res.msg);
                verifyReload();
            }
        })
    }

    function verifyReload(){
        validate = document.getElementById('validate');
        validate.src = "";
        validate.src = "/index.php/login/verify/temp/"+new Date().getTime().toString(36);
    }

</script>


</body>
</html>
